let config;
let commonConfig;
const md = window.markdownit();
axios.get('../static/data/indexConfig.json') //在config文件加载完后再回调运行vue与jquery
    .then(function (response) {
        config = response.data;
        axios.get('../static/data/commonConfig.json') //在config文件加载完后再回调运行vue与jquery
            .then(function (response) {
                commonConfig = response.data;
                runVue();
                runJQuery();
            })
            .catch(function (error) {
                console.log(error);
            })
    })
    .catch(function (error) {
        console.log(error);
    })
// VUE脚本
const runVue = () => {
    const {ref, computed, reactive} = Vue;
    const App = {
        setup() {
            const greetingsTitle = config['greetingsTitle'][Math.ceil(Math.random() * config['greetingsTitle'].length - 1)];
            const greetingsDescription = config['greetingsDescription'][Math.ceil(Math.random() * config['greetingsDescription'].length - 1)];
            const helloContext = config['helloContext']
            const topBars = commonConfig['topBars'];
            const notificationText = config['notificationText'];
            const userButtonText = commonConfig['userButtonText'];
            const madeBy = config['madeBy'];
            const isLogin = ref(false);
            const goTo = (link) => {
                window.location.href = link;
            }
            return {
                goTo,
                greetingsDescription,
                greetingsTitle,
                helloContext,
                topBars,
                notificationText,
                madeBy,
                isLogin,
                userButtonText
            }
        }
    };
    const app = Vue.createApp(App);
    app.mount("#app");
}


//jquery脚本
const runJQuery = () => {
    $(document).ready(() => {
        /*变量*/
        let card;   //card组件
        let hiddenList;

        /* HelloItem对象池 */
        const helloItemArray = [];


        /*生命函数*/
        const active = () => { //生命周期函数active,初始化操作
            start();
        }
        const start = () => {
            card = $("#mainLeftContainer");
            hiddenList = $("#hidden");
            initHelloItemObjectPool();
            update(() => {
                getHelloItemIfPresence();
                adjustCardCapacity();
            }, 1000);
        }
        const update = (handler, time) => { //生命周期函数update,间隔时间执行逻辑操作
            setInterval(handler, time);
        }

        /*一般函数*/
        const initHelloItemObjectPool = () => { //初始化对象池
            for (let i = 0; i < config['helloObjectPoolLength']; i++) {
                const clone = $("#helloItem").clone();
                clone.hide();
                helloItemArray.push(clone);
            }
        }
        const getHelloItemIfPresence = () => { //获取helloItem对象如果存在
            if (helloItemArray.length === 0) return;
            const helloItem = helloItemArray.pop();
            helloItem.text(config['helloItemText'][Math.ceil(Math.random() * config['helloItemText'].length - 1)]);
            helloItem.css("top", Math.ceil(Math.random() * 100) + "%");
            helloItem.css("left", Math.ceil(Math.random() * 100) + "%");
            card.append(helloItem);
            helloItem.show('drop', 2000);
            setTimeout(() => {
                helloItem.hide();
                helloItemArray.push(helloItem);
                const render = md.render(helloItem.text());
                const item = $(render);
                card.append(item);
                item.hide();
                item.show('fade', 1000);
            }, 1000 * config['helloObjectPoolLength']);
        }
        const adjustCardCapacity = () => { //调整Card容器容量
            let ansArray = [];
            for (let i = 0; i < card.children().length; i++) {
                const child = card.children()[i];
                if (child.id === 'helloItem') continue;
                ansArray.push(child);
            }
            if (ansArray.length >= config['cardMaxLength']) {
                ansArray[0].remove();
            }
        }
        /*Main*/
        active();
    });
}